import React, { useState, useEffect } from 'react'
import { Form, Input, Button, Switch, Upload, InputNumber, TreeSelect, Image, message } from 'antd'
import { fetchCates } from '@a/cateLists'
import { useNavigate } from 'react-router-dom'
import { addItem } from '@a/item'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
export default function ItemAdd() {
  const navigate = useNavigate();
  // 新增商品
  const submitItem = (params: any) => {
    addItem({
      ...params,
      thumb,
      content: html
    }).then(res => {
      if (res.data.code === 200) {
        message.success(res.data.msg, 2, () => {
          navigate('/itemLists', {
            replace: true
          })
        })
      }

    })
  }

  // 请求已有分类 作为当前新增商品的分类
  const [cates, setCates] = useState<any[]>([])
  const getchCates = () => {
    fetchCates().then(res => {
      if (res.data.code === 200) {
        setCates(res.data.data.lists);
      }
    })
  }
  useEffect(() => {
    getchCates();
  }, [])

  // 处理 商品封面图片
  let [thumb, setThumb] = useState('')
  // 文件上传状态改变
  const fileUploadChange = (info: { file: { status: string; response: { data: { url: string; }; }; }; }) => {
    if (info.file.status === 'done') {
      info.file.response.data.url
      setThumb(info.file.response.data.url)
    }

  }

  // 富文本编辑器
  const [editor, setEditor] = useState<IDomEditor | null>(null)   // TS 语法
  // 编辑器内容
  const [html, setHtml] = useState('')

  // 工具栏配置
  const toolbarConfig: Partial<IToolbarConfig> = {}  // TS 语法            
  // 编辑器配置
  const editorConfig: Partial<IEditorConfig> = {    // TS 语法
    placeholder: '请输入内容...',
    MENU_CONF: {
      uploadImage: {
        server: '/api/upload',
        fieldName: 'file',
        customInsert(res: any, insertFn: any) {  // TS 语法
            
              insertFn(res.data.url)
          },
      }
    }
  }
  return (
    <div style={{ maxWidth: 800 }}>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ onsale: true }}
        onFinish={submitItem}
        autoComplete="off"
      >
        <Form.Item
          label="商品名"
          name="itemName"
          rules={[{ required: true, message: '分类名必填!' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="价格"
          name="price"
          rules={[{ required: true, message: '价格必填!' }]}
        >
          <InputNumber min={0} />
        </Form.Item>
        <Form.Item
          label="上下架"
          name="onsale"
          valuePropName="checked"
        >
          <Switch checkedChildren="上架" unCheckedChildren="下架" />
        </Form.Item>
        <Form.Item
          label="所属分类"
          name="cateId"
          rules={[{ required: true, message: '分类必填!' }]}
        >
          <TreeSelect
            treeData={cates}
            fieldNames={{
              label: 'cateName',
              value: 'id',
              children: 'children'
            }} />
        </Form.Item>
        <Form.Item
          label="分类图标"
        >
          <Upload
            name="file"
            action="/api/upload"
            onChange={fileUploadChange}
          >
            <Button>点击上传</Button>
          </Upload>
          <Image src={thumb} width={100} />
        </Form.Item>
        <Form.Item
          label="商品描述"
          name="desc"
        >
          <Input.TextArea />
        </Form.Item>
        <Form.Item
          label="商品详情"
        >
          <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
            <Toolbar
              editor={editor}
              defaultConfig={toolbarConfig}
              mode="default"
              style={{ borderBottom: '1px solid #ccc' }}
            />
            <Editor
              defaultConfig={editorConfig}
              value={html}
              onCreated={setEditor}
              onChange={editor => setHtml(editor.getHtml())}
              mode="default"
              style={{ height: '500px', overflowY: 'hidden' }}
            />
          </div>
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            确定
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}
